<template>
    <el-card>
            <template #header>
              <div class="card-header">
                <span>课程列表</span>
              </div>

            </template>
              <div class="zt">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column fixed prop="date" label="序号" width="90" />
                  <el-table-column prop="name" label="课程名称" width="150" />
                  <el-table-column prop="state" label="创建时间" width="120" />
                  <el-table-column prop="city" label="可见状态" width="120">
                    <el-switch v-model="zhuangtai" />
                  </el-table-column>
                  <el-table-column prop="address" label="操作" width="755">
                    <el-button @click="bj"><el-icon><EditPen /></el-icon></el-button>
                    <el-button @click="zygl"><el-icon><Files /></el-icon></el-button>
                    <el-button @click="zybp"><el-icon><Monitor /></el-icon></el-button>
                    <el-button @click="kk"><el-icon><School /></el-icon></el-button>
                  </el-table-column>
                  </el-table>
                  <span v-show="s1" >正在{{show.cz+show.mz}}</span>   
                  <span v-show="s2" >正在{{show.cz+show.mz}}</span>   
                  <span v-show="s3" >正在{{show.cz+show.mz}}</span>   
                  <span v-show="s4" >正在{{show.cz+show.mz}}</span>   
              </div>
            </el-card>   
</template>

<script>
import {EditPen,Files,Monitor,School} from '@element-plus/icons-vue'
import { ref } from 'vue'


export default{
    data(){
      return{
        tableData:[
          {
            date: '1',
            name: 'Java程序设计',
            state: '2020-12-12',
          },
          {
            date: '2',
            name: 'MySQL数据库技术',
            state: '2021-12-11',
          },
          {
            date: '3',
            name: 'Web前端开发基础',
            state: '2021-12-11',
          },
          {
            date: '4',
            name: 'web前端项目开发实战',
            state: '2021-12-11',
          },
        ],
        zhuangtai:ref(true),
        show:{
          cz:'',
          mz:''
        },
        s1:false,
        s2:false,
        s3:false,
        s4:false,
      }
    },
    components:{
      EditPen,
      Files,
      Monitor,
      School
    },
    methods:{
      bj(name){
        this.s1=true;
        Object.assign(this.show,{
           cz:'编辑',
           mz: name
        })
      },
      zygl(name){
        this.s2=true;
        Object.assign(this.show,{
           cz:'资源管理',
           mz: name
        })
      },
      zybp(name){
        this.s3=true;
         Object.assign(this.show,{
           cz:'资源编排',
           mz: name
        })
      },
      kk(name){
        this.s4=true;
        Object.assign(this.show,{
           cz:'开课',
           mz: name
        })
      }
    }
}
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.zt{
  height:300px;
  text-align:center;
}
</style>
